<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

    .line {
      fill: none;
      stroke-width: 1.5px;
    }
    div div div{
      border-left: 2px solid black;
      border-bottom: 1px solid black;
    }
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    body {
      font: 16px/21px Arial, sans-serif;
      background: #AAAAAA url(images/bg.jpg) 50% 0 repeat-y;
      
    }
    svg{
      font: 13px sans-serif;
    }
    #container{
      margin: 40px auto;
      width: 80%;
      height: 700px;
      background-color: #FFFFFF;
      padding: 20px 30px 20px 30px;
      border-radius: 10px;
      border: 1px solid ddd;
      box-shadow: 0px 0px 8px #000;
    }
    #info{
      margin-top: 40px;
    }
    #chart1{
      margin-top: 40px;
    }
    .brush .extent {
      stroke: #fff;
      fill-opacity: .125;
      shape-rendering: crispEdges;
    }
    h1{
      margin-top:1em;
    }

</style>
<body onload="initTime()" unselectable=on>
  <div id="container">
    <h1 style="text-align:center">微博可视化</h1> 
    <div id="div1" ></div>
    <div id="div2" ></div>
    <label id="label2"></label>
  </div>
<script src="d3.v3.min.js"></script>
<script src="time.js"></script>
<script src="graph.js"></script>
<script  
    src=" http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"  
    type="text/javascript"></script>  
<script>

    function parseAllLatLng(){
        graph.nodes.forEach(function(d){
      
      if (d.location == null){
      d.location = "北京";

    }
    parseLatLng();
  });
    }
    function fill(i, lat, lng){
      graph.nodes[i].lat = lat;
    }
    function parseLatLng() {  
        console.log("parseLatLng");
        var add = "北京";
        getLatLng(add, function(p) {  
          console.log(p);
          console.log(p.x);
        });  
        //d.geoX = tmpX;
        //d.geoY = tmpY;
    }  
    /** 
     *callback arguments: GLatLng 
     */  
    function getLatLng(address, callback) {  
        var geocoder = new GClientGeocoder();  
        var rtn = null;  
        geocoder.getLatLng(address, callback);  
    }  

</script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>

function init(){
  initTime();
}

/*
 * Const
 */
var width = 960,
    height = 500;

var timeChartWidth = 600, timeChartHeight = 100;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg1 = d3.select("#div1").append("svg")
    .attr("width", width)
    .attr("height", height);

var svg2 = d3.select("#div1").append("svg")
    .attr("width", width)
    .attr("height", height);

var graph;

var brush;
var timeX;


d3.json("a2.json", function(error, _graph) {

  _graph.nodes.forEach(function(d){
    d.date = parseDate(d.date);
  });

  graph = _graph;

  /*
   * Main Chart
   */
console.log(graph);

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg1.selectAll("line.link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  
  var node = svg1.selectAll("circle.node")
      .data(graph.nodes)
        .enter().append("svg:g");



      node.append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .attr("date", function(d){ return d.date;})
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

      // Label
      node.append("svg:text")
          .attr("text-anchor", "middle")
          .attr("dx", 0)
          .attr("dy", -20)
          .text(function(d){return d.name;})
          .style("fill", "#555")
          .style("font-family", "Arial")
          .style("font-size", 12);

      node.transition()
      .duration(500)
      .style("fill", "red");
      

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    //node.call(updateN//e);

  });

  /*
   * Time Chart
   */
   
  timeX = d3.time.scale()
            .range([0,timeChartWidth])
            .domain(d3.extent(graph.nodes, function(d){return d.date;}));

  timeXAxis = d3.svg.axis()
      .scale(timeX)
      .orient("bottom");

  svg2.append("g")
      .attr("transform", "translate(0,"+timeChartHeight+")")
      .attr("class", "x axis")
      .call(timeXAxis);
});
  


function turnblack(){
var nodes = svg.selectAll("circle.node")
    .transition()
    .duration(500)
    .style("fill", function(d) {d.name == "fuck4" ? "#1f77b4" : "#aec7e";})
    .style("fill", function(d) { return d.name=="fuck4" ? color(1) : color(0); });
    
  }

</script>

<input type="button" value="black" onclick="turnblack()" />
</body>